<script setup lang="ts">
import { ref } from 'vue'

// 子组件定义 prop 即可接收

const info = ref('我是子组件内部的数据哦')
const money = ref(0)
</script>
<template>
  <div class="slot-son">
    <div class="top">
      <!-- 具名插槽 -->
      <slot name="top"></slot>
    </div>
    <div class="main">
      <!-- 匿名插槽
        绑定给 slot 的数据会传递到外部
        外部 可以接收并使用 
      -->
      <slot :info="info" :money="money"> </slot>
    </div>
    <div class="footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>
<style scoped>
.slot-son {
  border: 1px solid orange;
  background-color: skyblue;
  padding: 20px;
}
.top {
  height: 100px;
  background-color: orange;
}
.main {
  height: 200px;
  background-color: yellowgreen;
}

.footer {
  height: 200px;
  background-color: purple;
}
</style>
